<template>
    <el-container id="app">
        <el-aside style="width:150px">
            <el-menu :collapse="false">
                <el-menu-item v-for="(page, index) in pages" :index="index.toString()" :key="'page-' + index" @click="go(page)">
                    <span slot="title">{{page.name}}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view />
        </el-main>
    </el-container>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
    computed:{
      pages(){
          return this.$router.getRoutes();
      }
    },
    methods:{
      go(page){
          if(this.$route.matched.some( item => item === page)){
              return;
          }
          this.$router.push(page.path);
      }
    }
}
</script>

<style>
    @font-face {
        font-family: 'webfont';
        font-display: swap;
        src: url('//at.alicdn.com/t/webfont_q41hxe1ce0d.eot'); /* IE9*/
        src: url('//at.alicdn.com/t/webfont_q41hxe1ce0d.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('//at.alicdn.com/t/webfont_q41hxe1ce0d.woff2') format('woff2'),
        url('//at.alicdn.com/t/webfont_q41hxe1ce0d.woff') format('woff'), /* chrome、firefox */
        url('//at.alicdn.com/t/webfont_q41hxe1ce0d.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/webfont_q41hxe1ce0d.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
    }
    #app {
        font-family: webfont, Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        height: 100%;
        width: 100%;
        margin:0;
        padding:0;
    }

</style>
